<template>
  <div class="app-container">
    <el-tag type="danger" class="tag">
      <p>请选择自己对应的考试类型！！!</p>
    </el-tag>
    <div
      v-if="list.length > 2"
      :class="[list.length % 2 == 0 ? 'app_card' : 'app_flex']"
    >
      <div v-for="(item, index) in list" :key="index" class="app_kr">
        <div class="app_img">
          <img src="../../../assets/ks.png" alt="" />
        </div>
        <div class="app_txt">
          <h2>{{ item.title }}</h2>
          <span class="str"
            >开始时间:{{ item.startTime ? item.startTime : "无" }}</span
          >
          <span class="str"
            >结束时间:{{ item.endTime ? item.endTime : "无" }}</span
          >
          <span class="str">考试时长:{{ item.totalTime }}分钟</span>
          <div v-if="item.state == 3" class="btn">
            <el-button
              type="primary"
              style="width: 120px color:#fff"
              disabled="false"
              >已结束</el-button
            >
          </div>
          <div v-if="item.state == 2" class="btn">
            <el-button
              type="primary"
              disabled="false"
              style="width: 120px color:#fff"
              >已完成</el-button
            >
          </div>
          <div v-if="item.state == 1" class="btn">
            <el-button
              type="primary"
              disabled="false"
              style="width: 120px color:#fff"
              >未开始</el-button
            >
          </div>
          <div v-if="item.state == 0" class="btn">
            <el-button
              type="primary"
              style="width: 120px color:#fff"
              @click="goExam(item.examId)"
              >开始考试</el-button
            >
          </div>
        </div>
      </div>
    </div>

    <div v-else class="app_flexs">
      <div v-for="(item, index) in list" :key="index" class="app_kr">
        <div class="app_img">
          <img src="../../../assets/ks.png" alt="" />
        </div>
        <div class="app_txt">
          <h2>{{ item.title }}</h2>
          <span class="str"
            >开始时间:{{ item.startTime ? item.startTime : "无" }}</span
          >
          <span class="str"
            >结束时间:{{ item.endTime ? item.endTime : "无" }}</span
          >
          <span class="str">考试时长:{{ item.totalTime }}分钟</span>
          <div v-if="item.state == 3" class="btn">
            <el-button
              type="primary"
              style="width: 120px color:#fff"
              disabled="false"
              >已结束</el-button
            >
          </div>
          <div v-if="item.state == 2" class="btn">
            <el-button
              type="primary"
              disabled="false"
              style="width: 120px color:#fff"
              >已完成</el-button
            >
          </div>
          <div v-if="item.state == 1" class="btn">
            <el-button
              type="primary"
              disabled="false"
              style="width: 120px color:#fff"
              >未开始</el-button
            >
          </div>
          <div v-if="item.state == 0" class="btn">
            <el-button
              type="primary"
              style="width: 120px color:#fff"
              @click="goExam(item.examId)"
              >开始考试</el-button
            >
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      center
      custom-class="clone"
    >
    <span slot="title" style="font-size: 20px;">温馨提示</span>
      <span style="font-size: 20px;letter-spacing: 5px;line-height: 30px;">{{ msgStr }}!</span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, exampaperMember } from "@/api/table";

import cache from '@/plugins/cache';
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: 0,
      listLoading: true,
      num: null,
      dialogVisible: false,
      msgStr: "",
    };
  },
  created() {
    this.fetchData();
    
  },
  methods: {
    async examModel() {
      let res = await exampaperMember({
        memberId: cache.session.getJSON('userId'),
      });

      if (!res.success) {
        this.dialogVisible = true;
        this.msgStr = res.msg;
        this.num = 1;
        return this.num;
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    fetchData() {
      if (this.$route.query.examType == 3) {
        getList({
          currentPage: 1,
          pageSize: 100,
          examType: this.$route.query.examType,
          scope: cache.session.getJSON('deptId'),
          startTime: "2023-03-09 09:00:00",
        }).then((response) => {
          this.list = response.data.list;
          this.listLoading = false;
        });
      } else {
        getList({
          currentPage: 1,
          pageSize: 100,
          examType: this.$route.query.examType,
        }).then((response) => {
          this.list = response.data.list;
          this.listLoading = false;
        });
      }
    },
    // 去考试
    goExam(e) {
      // this.examModel().then((res) => {
      //   if (res == 1 && this.$route.query.examType == 4) {
      //     return;
      //   } else {
          this.$router.push(
            `/examManage/${this.$route.query.examType}/prepare/${e}`
          );
        // }
      // }); 

      // 拿到考试ID，跳转
    },
  },
};
</script>

 <style lang="scss" scoped>

.app-container {
  height: 80vh;
  overflow: auto;
  padding: 20px;
  background:#eff3f7 ;
  .tag {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    position: relative;
    p {
      position: absolute;
     
      line-height: 40px;
      padding-left: 15px;
      font-size: 18px;
      animation: 26s scroll linear infinite normal;
    }
    @keyframes scroll {
      0%{
        left: 0%;
      }
      100%{
        left: 80%;
      }
    }
  }
  .app_card{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  
    .app_kr{
      width: 350px;
      height: 500px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
      margin-bottom: 30px;
     
      .app_img{
        width: 100%;
        height: 50%;
        border-radius: 10px;
        img{
          width: 100%;
          height: 100%;
          
        }
      }
      .app_txt{
        width: 100%;
        height: 50%;
        display: flex;
        background: #fff;
        flex-direction: column; 
        padding-left: 10px; 
        position: relative;
        h3{
          color: #333;
        }
        .str{
          color: #999;
          font-size:16px;
          margin-bottom: 15px;
        }
        .btn{
          position: absolute;
          right: 10px;
          bottom: 10px;

        }
      }
    }
  }
  .app_flex{
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    // &::after{
    //   content: "";
    //   width:1110px;
    //   flex-basis: auto;
    //  } 

    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 350px);
    grid-gap: 10px;
    .app_kr{
      min-width: 350px;
      min-height: 500px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
      margin-bottom: 15px;
      .app_img{
        width: 100%;
        height: 50%;
        border-radius: 10px;
        img{
          width: 100%;
          height: 100%;
          
          
        }
      }
      .app_txt{
        width: 100%;
        height: 50%;
        display: flex;
        background: #fff;
        flex-direction: column; 
        padding-left: 10px; 
        position: relative;
        h3{
          color: #333;
        }
        .str{
          color: #999;
          margin-bottom: 15px;
        }
        .btn{
          position: absolute;
          right: 10px;
          bottom: 10px;

        }
      }
    }
  }
  .app_flexs{
    display: flex;
    flex-wrap: wrap;
    
  
    .app_kr{
      width: 350px;
      height: 500px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
      margin-bottom: 30px;
      margin-right: 20px;
     
      .app_img{
        width: 100%;
        height: 50%;
        border-radius: 10px;
        img{
          width: 100%;
          height: 100%;
          
          
        }
      }
      .app_txt{
        width: 100%;
        height: 50%;
        display: flex;
        background: #fff;
        flex-direction: column; 
        padding-left: 10px; 
        position: relative;
        h3{
          color: #333;
        }
        .str{
          color: #999;
          font-size:16px;
          margin-bottom: 15px;
        }
        .btn{
          position: absolute;
          right: 10px;
          bottom: 10px;

        }
      }
    }
  }
}
 
 </style>
 